{% extends 'layout.html' %}
{% block content %}
<div class="container">
    <div class="container">
        <div>
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category,message in messages %}
                        <div class="alert alert-{{ category }} alert-dismissible col-lg-12">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
        </div>
    </div>
    <form method="POST" action="" class="form-signin">
        {{ form.hidden_tag() }}
        <div class="text-center mb-4">
            <img class="mb-1" src="{{ url_for('static',filename='images/docker.png') }}" alt="" width="72" height="72">
            <p class="display-5 text-primary">Docker Web UI</p>
            <h1 class="h3 mb-3 font-weight-normal">Please Login</h1>
        </div>
        <div class="form-group">
            {{ form.username(class="form-control",placeholder="Username" ) }}
        </div>
        <div class="form-group">
            {{ form.password(class="form-control",placeholder="Password") }}
        </div>
        <div class="form-group">
            {{ form.submit(class="btn btn-lg btn-primary btn-block") }}
        </div>

    </form>
    <div class=" fixed-bottom text-center bg-dark">
        <small class="text-white">
            &copy; 2019 <a href="#">Docker Web Engine ver. 1.0</a>
            Powered by Flask
        </small>
    </div>
</div>
{% endblock %}